<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { Progress, showSuccessToast } from "vant";
import ActivitInfo from "@/components/Activit/activitInfo.vue";
import { ref, onMounted } from "vue";
import { ActivityAxios } from "@/api";
import { FiltrationFun } from "@/utils";
import { UserStore } from "@/store";
const { t } = useI18n();
const userStore = UserStore();
onMounted(() => {
  //活动配置的数据
  getconfig();
});
const detailInfo = ref({
  claimFlag: 0,
  claimTimeStamp: 0,
  grade: 0,
  ratio: 0,
  reward: 0,
  accumulateBet: 0,
  nextRatio: 0,
  nextGrade: 0,
  nextBet: 0,
});
const percentageVla = ref(0);
//获取全局自助洗码详情信息
const getGlobalSelfDamDetailInfo = () => {
  ActivityAxios.getGlobalSelfDamDetailInfo().then(res => {
    detailInfo.value = res;
    if (detailInfo.value.nextBet > 0) {
      percentageVla.value =
        (detailInfo.value.accumulateBet / detailInfo.value.nextBet) * 100 > 100
          ? 100
          : (detailInfo.value.accumulateBet / detailInfo.value.nextBet) * 100;
    } else {
      percentageVla.value = 0;
    }
  });
};
//获取奖励
const getIncentives = () => {
  ActivityAxios.getDamReward().then(() => {
    getGlobalSelfDamDetailInfo();
    showSuccessToast("successes");
  });
};
//获取活动配置
const actConfigList: any = ref([]);
const getconfig = () => {
  FiltrationFun.getconfig(10).then(res => {
    actConfigList.value = res;
    if (userStore.isLogin) {
      getGlobalSelfDamDetailInfo();
    }
  });
};
</script>
<template>
  <div>
    <!-- 自助洗码 -->
    <img class="top-img" src="@/image/new_img/activity/rebate_top_banner2.png" />
    <div class="info-frame">
      <img class="rebateimg" src="@/image/new_img/activity/rebate_item_bg2.png" />
      <div class="info-content">
        <div class="info-title-frame df ai-center jc-center">
          <div class="info-title-text">{{ t("activity.websiteRebates.betting") }}</div>
          <div class="bettingVal">
            {{ FiltrationFun.formatNumber(detailInfo.accumulateBet / 100) }}
          </div>
          <div class="item-topframe-line"></div>
          <div class="info-title-text">{{ t("activity.websiteRebates.return") }}</div>
          <div class="bettingVal">{{ detailInfo.ratio / 1000 }}%</div>
        </div>
        <div class="item-middleframe df ai-center jc-space-between">
          <div class="item-middleframe-icon-frame df ai-center">
            <img class="item-middleframe-icon" src="@/image/new_img/activity/rebate_icon.png" />
            <span class="money-icon">{{ t("currencyType.pt") }}</span>
            <span class="moneyVal">{{ detailInfo.reward / 100 }}</span>
          </div>
          <img
            v-if="detailInfo.reward === 0"
            class="bottom-frame1"
            src="@/image/new_img/activity/rebate_item_received.png"
          />
          <img
            v-if="detailInfo.reward > 0"
            class="bottom-frame1"
            src="@/image/new_img/activity/rebate_item_claim.png"
            @click="getIncentives"
          />
        </div>
        <div class="line-text-start-frame">
          <div class="line-text-frame df jc-space-between">
            <div class="left-text">{{ t("activity.websiteRebates.promotionProgress") }}</div>
            <div class="left-text df color919">
              <span class="nextReturn"> {{ t("activity.websiteRebates.nextReturn") }}</span
              >{{ detailInfo.nextRatio / 1000 }}%
            </div>
          </div>
          <div class="progress-frame">
            <div
              class="progress-div"
              :style="{
                left: `calc(${percentageVla}% - 8px)`,
              }"
            ></div>
            <Progress
              :percentage="percentageVla"
              track-color="#ffffff26"
              color="linear-gradient(90deg, #AB3FE7 0%, #FE7919 100%)"
              stroke-width="0.2rem"
              :show-pivot="false"
            />
          </div>
          <div class="bottom-frame df ai-center jc-space-between">
            <div>{{ detailInfo.nextGrade }}</div>
            <div>{{ FiltrationFun.formatNumber(detailInfo.nextBet / 100) }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-frame">
      <div class="list-title-frame df ai-center">
        <img class="" src="@/image/new_img/activity/full_wash_chip_bai.svg" />
        <div class="list-title">{{ t("activity.websiteRebates.listTitle") }}</div>
      </div>
      <div class="meter-header-frame df ai-center">
        <div class="sub-title1 df ai-center jc-center">{{ t("activity.relief.level") }}</div>
        <div class="sub-title2 df ai-center jc-center">
          {{ t("activity.websiteRebates.tradingVolume") }}
        </div>
        <div class="sub-title3 df ai-center jc-center">
          {{ t("activity.websiteRebates.returnRate") }}
        </div>
      </div>
      <div
        class="meter-list-frame df ai-center"
        v-for="(item, index) in actConfigList"
        :key="index"
        :class="{
          metercolor: (index + 1) % 2 === 0,
          meterradius: index + 1 === actConfigList.length,
        }"
      >
        <div class="sub-title1 df ai-center jc-center">{{ item.ActGlobalSelfDamConfig.grade }}</div>
        <div class="sub-title2 df ai-center jc-center">
          {{ FiltrationFun.formatNumber(item.ActGlobalSelfDamConfig.bet / 100) }}
        </div>
        <div class="sub-title3 df ai-center jc-center">
          {{ item.ActGlobalSelfDamConfig.returnRate / 1000 }}%
        </div>
      </div>
    </div>
    <div class="ActivitInfo-frame">
      <ActivitInfo :actType="10" :sizeVal="2" :title="t('activity.eventDescription')" />
    </div>
  </div>
</template>
<style lang="less" scoped>
.top-img {
  width: 100%;
  height: 334px;
  margin-top: -6px;
}
.info-frame {
  width: 100%;
  height: 338px;
  text-align: center;
  margin-top: -14px;
  position: relative;
  left: 0;
  top: 0;
  .rebateimg {
    width: 676px;
    height: 338px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    z-index: 1;
  }
  .info-content {
    width: 676px;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    z-index: 2;
    .info-title-frame {
      width: 100%;
      height: 108px;
      .info-title-text {
        font-size: 28px;
        font-weight: 700;
        color: #ffffff;
        margin-right: 8px;
      }
      .bettingVal {
        color: #ffee00;
        font-weight: 700;
        font-size: 32px;
        margin-right: 22px;
      }
      .item-topframe-line {
        height: 46px;
        width: 1px;
        background-color: #ffffff26;
        margin-right: 22px;
      }
    }
    .item-middleframe {
      width: 600px;
      height: 100px;
      margin: auto;
      background-color: #00000040;
      border-radius: 52px;
      .item-middleframe-icon-frame {
        width: auto;
        height: 100%;
        margin-left: 24px;
        color: #ffee00;
        .item-middleframe-icon {
          width: 66px;
          height: 66px;
          margin-right: 26px;
        }
        .money-icon {
          font-weight: 400;
          margin-right: 8px;
          font-size: 24px;
        }
        .moneyVal {
          font-size: 48px;
          font-weight: 700;
        }
      }
      .bottom-frame1 {
        width: 166px;
        height: 82px;
        margin-right: 10px;
      }
    }
    .line-text-start-frame {
      width: 600px;
      height: auto;
      margin: auto;
      .line-text-frame {
        width: 100%;
        height: 26px;
        padding-top: 16px;
        margin-bottom: 4px;
        .left-text {
          color: #ffffff73;
          font-size: 24px;
        }
        .color919 {
          color: #fe7919;
        }
        .nextReturn {
          margin-right: 6px;
          opacity: 0.5;
        }
      }
    }
    .bottom-frame {
      width: 600px;
      height: auto;
      color: #ffffff73;
      font-size: 24px;
      margin-top: 6px;
    }
  }
}
.list-frame {
  width: 676px;
  height: auto;
  margin: auto;
  margin-top: 34px;
  .list-title-frame {
    width: 100%;
    height: 100px;
    border-top-left-radius: 34px;
    border-top-right-radius: 34px;
    background-image: linear-gradient(
      98deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.04) 100%
    );
    img {
      width: 42px;
      height: 42px;
      margin-left: 34px;
    }
    .list-title {
      margin-left: 16px;
      font-size: 28px;
      font-weight: 700;
      color: #ffffff;
    }
  }
  .meter-header-frame {
    width: 100%;
    background-color: #ffffff14;
    height: 100px;
    font-size: 24px;
    .sub-title1 {
      width: 100px;
      font-size: 24px;
      color: #ffffffd9;
    }
    .sub-title2 {
      width: 350px;
      height: 50px;
      border-left: 1px solid #ffffff26;
      border-right: 1px solid #ffffff26;
      font-size: 24px;
      color: #ffffffd9;
    }
    .sub-title3 {
      flex: 1;
      font-size: 24px;
      color: #ffffffd9;
    }
  }
  .meter-list-frame {
    width: 100%;
    background-color: transparent;
    height: 100px;
    .sub-title1 {
      width: 100px;
      font-size: 24px;
      color: #ffffffd9;
      font-weight: 400;
    }
    .sub-title2 {
      width: 350px;
      height: 50px;
      font-size: 24px;
      color: #ffffffd9;
      font-weight: 400;
    }
    .sub-title3 {
      flex: 1;
      font-size: 24px;
      color: #ffffffd9;
      font-weight: 400;
    }
  }
  .metercolor {
    background-color: #ffffff0a;
  }
  .meterradius {
    border-bottom-left-radius: 34px;
    border-bottom-right-radius: 34px;
  }
}
.ActivitInfo-frame {
  width: 676px;
  height: auto;
  margin: auto;
  margin-top: 60px;
}
.progress-frame {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 16px;
  overflow-x: hidden;
  .progress-div {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    transition: left 0.3s ease;
    z-index: 10;
  }
}
</style>
